<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>References JSON Editor Example</title>

    <script src="../../dist/jsoneditor.js"></script>
  </head>
  <body>
    <h1>References JSON Editor Example</h1>

    <p>This example demonstrates the following:</p>
    <ul>
      <li>Loading external schemas via ajax</li>
      <li>Referencing internal schema definitions</li>
      <li>Referencing external schema definitions</li>
      <li>Referencing external schema properties</li>
    </ul>

    <button id='submit'>Submit (console.log)</button>
    <button id='restore'>Restore to Default</button>
    <button id='enable_disable'>Disable/Enable Form</button>
    <span id='valid_indicator'></span>

    <div id='editor_holder'></div>

    <script>
      // This is the starting value for the editor
      // We will use this to seed the initial editor
      // and to provide a "Restore to Default" button.
      var starting_value = [
        {
          name: "John Smith",
          age: 35,
          gender: "male",
          location: {
            city: "San Francisco",
            state: "California",
            citystate: ""
          },
          pets: [
            {
              name: "Spot",
              type: "dog",
              fixed: true
            },
            {
              name: "Whiskers",
              type: "cat",
              fixed: false
            }
          ]
        }
      ];

      // Initialize the editor
      var editor = new JSONEditor(document.getElementById('editor_holder'),{
        // Enable fetching schemas via ajax
        ajax: true,

        // Enable caching schemas from via ajax
        ajax_cache_responses: true,

        // The cache-buster for cached caches
        ajax_cache_buster: 'abc123',

        // The schema for the editor
        schema: {
          $schema: "https://json-schema.org/draft-04/schema",
          title: "Example Organization",
          type: "object",
          definitions: {
            taxid: {
              type: "string",
              title: "Tax ID"
            },
            external: {
              $ref: "../fixtures/string.json"
            }
          },
          properties: {
            external: {
              $ref: "#/definitions/external"
            },
            orgid: { $ref: "#/definitions/taxid" },
            address: {
              $ref: "../fixtures/definitions.json#/definitions/address"
            },
            people: {
              type: "array",
              title: "People",
              format: "tabs",
              items: {
                title: "Person",
                headerTemplate: "{{i}} - {{self.name}}",
                oneOf: [
                  {
                    $ref: "../fixtures/basic_person.json",
                    title: "Basic Person"
                  },
                  {
                    $ref: "../fixtures/person.json",
                    title: "Complex Person"
                  }
                ]
              }
            },
            link: {
              $ref: '../fixtures/definitions.json#/properties/address'
            }
          }
        },

        // Seed the form with a starting value
        startval: starting_value,

        // Disable additional properties
        no_additional_properties: true,

        // Require all properties by default
        required_by_default: true
      });

      // Hook up the submit button to log to the console
      document.getElementById('submit').addEventListener('click',function() {
        // Get the value from the editor
        console.log(editor.getValue());
      });

      // Hook up the Restore to Default button
      document.getElementById('restore').addEventListener('click',function() {
        editor.setValue(starting_value);
      });

      // Hook up the enable/disable button
      document.getElementById('enable_disable').addEventListener('click',function() {
        // Enable form
        if(!editor.isEnabled()) {
          editor.enable();
        }
        // Disable form
        else {
          editor.disable();
        }
      });

      // Hook up the validation indicator to update its
      // status whenever the editor changes
      editor.on('change',function() {
        // Get an array of errors from the validator
        var errors = editor.validate();

        var indicator = document.getElementById('valid_indicator');

        // Not valid
        if(errors.length) {
          indicator.style.color = 'red';
          indicator.textContent = "not valid";
        }
        // Valid
        else {
          indicator.style.color = 'green';
          indicator.textContent = "valid";
        }
      });
    </script>
  </body>
</html>
